<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>注册</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords"
          content="Report Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <!-- //Meta tag Keywords -->
    <link href="../../static/css/login/css2.css" rel="stylesheet">
    <!--/Style-CSS -->
    <link rel="stylesheet" href="../../static/css/login/style.css" type="text/css" media="all"/>
    <!--//Style-CSS -->

    <link rel="stylesheet" href="../../static/css/login/font-awesome.min.css" type="text/css" media="all">

</head>

<body>

<!-- form section start -->
<section class="w3l-hotair-form" style="background: #0568C1 ">
    <h1>欢迎回来</h1>
    <div class="container">
        <!-- /form -->
        <div class="workinghny-form-grid">
            <div class="main-hotair">
                <div class="content-wthree">
                    <h2>账户注册</h2>
                    <form method="post" id="regForm">
                        <input id="regname" type="text" class="text" name="username" placeholder="用户名" required=""
                               autofocus>
                        <input id="regpass" type="password" class="password" name="password" placeholder="密码"
                               required=""
                               autofocus>
                        <input id="regemail" type="email" class="text" name="email" placeholder="邮箱" required=""
                               autofocus>
                        <button id="registrationButt" class="btn" type="submit">注册</button>
                    </form>

                    <p class="account">已有账户
                        <a href="/login" class="account">
                            登录
                        </a></p>
                    <span style="color: red"></span>
                </div>
                <div class="w3l_form align-self">
                    <div class="left_grid_info">
                        <img src="../../static/img/login/1.png" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <!-- //form -->
    </div>
    <!-- copyright-->
    <div class="copyright text-center">
        <p class="copy-footer-29">© 2025. All rights reserved</p>
    </div>
    <!-- //copyright-->
</section>
<!-- //form section start -->

<!--阻止原来的表的提交，重新通过fetch的方式post,而后根据后台反馈可进行弹窗和跳转-->
<script>
    document.getElementById('regForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止默认提交行为

        const form = this;
        const formData = new FormData(form); // 自动收集表单数据

        fetch('/reg', { // 替换为你的注册接口地址
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                console.log(response)
                return response.text(); // 假设服务器返回 字符串 格式
            })
            .then(data => {
                if (data === "reg-pass") {
                    alert(data.message || '注册成功！'); // 弹窗提示
                    window.location.href = '/'; // 跳转到首页
                } else if (data==="p-invalid"){
                    alert(data.message || '密码无效！');
                    window.location.reload()
                }else if (data==="user-repeated"){
                    alert(data.message || '用户名已存在！');
                    window.location.reload()
                }
                else{
                    alert('注册失败：' + (data.message || '未知错误'));
                }
            })
            .catch(error => {
                console.error('错误:', error);
                alert('注册过程中发生错误，请稍后再试。');
            });
    });
</script>


</body>

</html>